<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>example</title>
<style type="text/css">
.dot{position:absolute;width:5px;height:5px;overflow:hidden;background:#000;background-image:url(bg2.jpg);}
</style>
<script src="http://likaituan.test/fw4/F.js"></script>

<script>
var ggp = F.ready({
	init: function(){
		this.w = 200;
		this.h = 100;
		var box = F("box").ps(1).size(this.w,this.h);
		var img = box.full("img",1).src("bg.jpg");
		/*
		if(F.iscanvas){
			var canvas = box.full("canvas",1).attr("width",this.w).attr("height",this.h);
			this.csv = canvas.node;
			var ctx = canvas.node.getContext('2d');
					ctx.clearRect(0,0,this.w,this.h);
					ctx.globalCompositeOperation="source-over";
					ctx.fillRect(0,0,this.w,this.h);
					ctx.globalCompositeOperation="destination-out";
	
			ctx.fillStyle = "#ff0000";
			canvas.bind("mousemove", this.fill.proxy(this));
			this.ctx = ctx;
		}else{
		*/
			this.canvas = box.full("div",1);
			var ix=this.w/5,
				jx=this.h/5,
				ax=ix*jx;
			this.canvas.html(Array(ax+1).join('<div class="dot"></div>')).click(this.play.proxy(this));
			this.grids = this.canvas.child();
			this.grids.each(function(fo,i){
				fo.bgpos(-(~~(i/jx))*5,-i%jx*5).pos((~~(i/jx))*5,i%jx*5);
			});
			this.arr = F.range(0,ax-1,ax);
		//}
	},
	play : function(){	
		this.timer = window.setInterval("ggp.clear_block()", 16);
	},
	clear_block : function(){
		for(var i=0; i<10; i++){
			var idx = this.arr.shift();
			this.grids.item(idx).hide();
		}
		if(this.arr.length==0){
			window.clearInterval(this.timer);	
		}
	},	
	fill : function(e){
		var x = e.clientX - this.csv.offsetLeft;
		var y = e.clientY - this.csv.offsetTop;
		this.ctx.beginPath();
		this.ctx.arc(x, y, 2, 0, Math.PI*2, true);
		this.ctx.fill();
	}
});

</script>
</head>
<body>
<div id="box"></div>
<button>11</button>
</body>
</html>